<template>
  <div class="page-wrap f-hot fix-nav active">
    <div class="swiper-header movie-ad"></div>
    <div class="tab-block">
      <div class="tab-content">
        <div class="page f-hot">
          <div class="list-wrap">
            <div class="most-expected" data-view-bid="b_movie_bt66pvrm_mv">
              <p class="title">近期最受期待</p>
              <div
                class="most-expected-list view-scroll-x-container"
                v-if="SoonList_top"
              >
                <router-link
                  :to="'/detail/' + i.filmId"
                  v-for="i in showSoonList"
                  :key="i.filmId"
                  class="link expected-item"
                  :data-id="i.filmId"
                  data-view-sended="1"
                  ><div class="poster default-img-bg">
                    <img :src="i.poster" :alt="i.namea" /><span
                      class="wish-bg"
                    ></span
                    ><span class="wish"
                      ><span class="wish-num">{{ i.filmId }}</span
                      >人想看</span
                    >
                    <div class="toggle-wish">
                      <span></span>
                    </div>
                  </div>
                  <h5 class="name line-ellipsis">{{ i.name }}</h5>
                  <p class="date">{{ i.premiereAt | premiereAt_filter }}</p>
                </router-link>
              </div>
            </div>

            <div class="coming-list">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :immediate-check="false"
              >
                <div v-for="(wrap, index) in showSoonList_bottom" :key="index">
                  <p class="group-date">{{ wrap.time | wrap_filter}}</p>
                  <router-link
                    v-for="item in wrap.list"
                    :key="item.filmId"
                    :to="'/detail/'+item.filmId"
                    class="link item"
                    :data-id="item.filmId"
                    ><div class="main-block">
                      <div class="avatar">
                        <div class="default-img-bg">
                          <img
                            :src="item.poster"
                          />
                        </div>
                      </div>
                      <div class="mb-outline-b content-wrapper">
                        <div class="column content">
                          <div class="box-flex movie-title">
                            <div class="title line-ellipsis v3d_title">
                              {{item.name}}
                            </div>
                            <span class="version v3d"></span>
                          </div>
                          <div class="detail column">
                            <div class="wantsee line-ellipsis">
                              <span class="person">{{item.filmId}}</span
                              ><span class="p-suffix">人想看</span>
                            </div>
                            <div class="actor line-ellipsis">
                              主演:{{item.actors | actors_filter}}
                            </div>
                            <div class="actor line-ellipsis">
                              {{new Date(item.premiereAt*1000).toISOString().slice(0,10)+'上映'}}
                            </div>
                          </div>
                        </div>
                        <div class="button-block" data-id="1318977">
                          <div
                            class="btn normal"
                            data-bid="b_movie_itaikyfk_mc"
                            data-view-bid="b_movie_itaikyfk_mv"
                            data-lab='{ "movie_id": "1318977", "type": "预售" }'
                            data-view-sended="1"
                            style="
                              background-color: rgb(60, 159, 230);
                              box-shadow: rgba(60, 159, 230, 0.15) 0px 0.04rem
                                0.04rem 0px;
                            "
                          >
                            <span class="fix">预售</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </router-link>
                </div>
              </van-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../../utils/htttp";
import { getLocation, getCityId } from "../../utils/$getlocation";
import { mapState } from "vuex";
import * as moment from "moment";
moment.locale(["zh-cn", "zh-tw"]);
import Vue from "vue";
import { List } from "vant";
Vue.use(List);

export default {
  filters: {
    premiereAt_filter(timer) {
      return moment(timer * 1000).format("MMMDo");
    },
    wrap_filter(timer){
        let time = timer * 1000
        let timeStr = moment(time).format("MMMDo")+moment(time).format('dddd')
        timeStr = timeStr.replace(/星期/g,' 周')
        return timeStr
    },
    actors_filter(actors){
        let arr = actors.map(item=>item.name)
        return arr.join(',')
    }
  },
  data() {
    return {
      defaultCityId: 0,
      SoonList_top: [],
      SoonList_bottom: [],
      total: 0,
      loading: false,
      finished: false,
      pageNum: 1,
    };
  },
  async created() {
    console.log(2);
    let cityInfo = await getLocation();
    let cityname = cityInfo.addressComponent.city.slice(0, 2);
    let { cityId } = await getCityId(cityname);
    this.defaultCityId = cityId;
    let { list_top, total } = await this.getSoonList_top(
      this.defaultCityId,
      this.cityId
    );
    let { SoonList_bottom } = await this.getSoonList_bottom(
      this.defaultCityId,
      this.cityId
    );
    this.SoonList_top = list_top;
    this.SoonList_bottom = SoonList_bottom;
    this.total = total;
   
  },
  mounted() {
  },
  methods: {
    //获取头部待映数据
    getSoonList_top(id, vuexid) {
      return new Promise((res, rej) => {
        http("/soon", {
          params: {
            cityId: vuexid || id,
            pageNum: 1,
            pageSize: 10,
          },
        }).then((data) => {
          res({ list_top: data.data.films, total: data.data.total });
        });
      });
    },
    //获取下面待映数据
    getSoonList_bottom(id, vuexid) {
      return new Promise((res, rej) => {
        http("/soon", {
          params: {
            cityId: vuexid || id,
            pageNum: 1,
            pageSize: 10,
          },
        }).then((data) => {
          res({ SoonList_bottom: data.data.films, total: data.data.total });
        });
      });
    },
    //洗牌算法
    Shuffle(arr) {
      let itemIndex,
        len = arr.length;

      for (var i = 0; i < len; i++) {
        let radonIndex = Math.floor(Math.random() * len);
        itemIndex = arr[radonIndex];
        arr[radonIndex] = arr[i];
        arr[i] = itemIndex;
      }
      return arr;
    },

    //懒加载
    onLoad() {
      if (this.total === this.SoonList_bottom.length) {
        this.finished = true;
        return;
      }
      this.pageNum++;
      http("/soon", {
        params: {
          cityId: this.cityId || this.defaultCityId,
          pageNum: this.pageNum,
          pageSize: 10,
          type: 1,
        },
      }).then((res) => {
        this.SoonList_bottom = [...this.SoonList_bottom, ...res.data.films];
        this.loading = false;
      });
    },
  },
  computed: {
    ...mapState("city", ["cityId"]),
    showSoonList() {
      return this.Shuffle(this.SoonList_top);
    },
    showSoonList_bottom() {
      let iArr = Array.from(
        new Set(this.SoonList_bottom.map((item) => item.premiereAt))
      );
      let ni = [];
      iArr.forEach((item) => {
        let oi = this.SoonList_bottom.filter((i) => {
          return i.premiereAt === item;
        });
        ni.push({
          time: item,
          list: oi,
        });
      });
      return ni;
    },
  },
};
</script>
<style lang="less" scoped>
</style>